<template>
    <div>
        <!-- 新增 -->
        <div style="margin: 10px 0;">
            <el-button type="primary" @click="handelAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
        </div>
        <el-table :data="tableData" border stripe @selection-change="handSelectionChange">
            <el-table-column prop="id" label="ID" width="60"></el-table-column>
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column label="内容" width="110">
                <template slot-scope="scope">
                <el-popover
                    placement="bottom"
                    width="800"
                    trigger="click">
                    <!-- 使用 scope.row 来访问当前行的数据 -->
                    <div>{{ scope.row.content }}</div>
                    <el-button slot="reference">点击查看</el-button>
                </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="imgSrc" label="图片" width="150">
                <template slot-scope="scope">
                    <div style="width: auto;height: auto;">
                        <img :src="scope.row.imgSrc" width="100%" alt="">
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="author" label="作者" width="100" ></el-table-column>
            <el-table-column prop="publicationDate" label="添加时间">
                <template slot-scope="scope">
                    {{ formatDate(scope.row.publicationDate) }}
                </template>
            </el-table-column>

            <el-table-column label="操作" width="200" align="center">
                <template v-slot="scope">
                    <el-button type="success" @click="handleEdit(scope.row)">编辑<i class="el-icon-edit"></i></el-button>

                    <el-popconfirm title="您确定删除吗" confirm-button-text="确定" style="margin-left: 5px;"
                        cancel-button-text="我再想想" icon="el-icon-info" icon-color="red" @confirm="del(scope.row.id)">
                        <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <div style="padding: 10px 0;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>


        <el-dialog title="文章信息" :visible.sync="dialogFormVisible">
            <el-form label-width="80px" :model="form" :rules="rules" >
                <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="作者" prop="author">
                    <el-input v-model="form.author" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图片地址" prop="img_src">
                    <el-input v-model="form.img_src" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <el-input type="textarea" :rows="5" disabled v-model="form.content" autocomplete="off" style="margin: 10px 0;">
                    </el-input>
                    <Editor @value="value"/>
                    
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save(); dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Editor from "@/components/Editor";
export default {
    name: 'User',
    components:{ Editor },

    data() {
        
        return {
            tableData: [],
            total: 0, //页码
            pageNum: 1,
            pageSize:5,
            dialogFormVisible: false,
            author: "",
            content: "",
            imgSrc: "",
            title: "",
            multipleSelection: [],
            form: {
                author: "",
                content: "",
                img_src: "",
                title: ""
            },
            rules: {
                author: [{ required: true, message: '必填值', trigger: 'blur' },],
                content: [{ required: true, message: '必填值', trigger: 'blur' },],
                img_src: [{ required: true, message: '必填值', trigger: 'blur' },],
                title: [{ required: true, message: '必填值', trigger: 'blur' },],
            }
        };
    },
    computed: {},

    mounted() {
        // 请求分页查询数据
        this.requests()
    },

    methods: {
        value(val) {
            this.form.content = val
            console.log(val);
            //父组件接收子组件传递的值
        },
        handleChange(value) {
            console.log(value);
        },
        formatDate(dateString) {
            if (!dateString) return ''; // 处理空日期
            const options = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };
            return new Date(dateString).toLocaleString('zh-CN', options);
        },
        handSelectionChange(val) {
            console.log(val);
            this.multipleSelection = val
        },
        del(id) {
            this.request.delete("/wanxin/as", {
                params: {
                    id:id
                }
            }).then(res => {
                if (res) {
                    console.log("删除成功");
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.requests()
                } else {
                    console.log("删除失败");
                    this.$message({
                        type: 'info',
                        message: '删除失败!'
                    });
                }
            })
        },
        handleEdit(row) {
            this.form = row
            this.form.img_src = row.imgSrc
            console.log(this.form.img_src);
            this.dialogFormVisible = true
        },
        handelAdd() {
            this.dialogFormVisible = true
            this.form.author = ""
            this.form.content = ""
            this.form.title = ""
            this.form.img_src = ""
        },
        save() {
            if (this.form.author != "" && this.form.content != "" && this.form.title != "" && this.form.img_src != "")
            {
                this.request.post("/wanxin/as", this.form).then(res => {
                    if (res) {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                        this.requests()
                    } else {
                        this.$message({
                            type: 'info',
                            message: '操作失败!'
                        });
                    }
                })
            } else {
                this.$message({
                    type: 'error',
                    message: '有属性值为空!'
                });
            }
        },
        requests() {
            this.request.get("wanxin/as/page", {
                params: {
                    pagenum: this.pageNum,
                    pagesize:this.pageSize
                }
            }).then(res => {
                console.log(res);
                this.tableData = res
                
                this.request.get("wanxin/as").then(res => {
                this.total = res.length
                })

                console.log(this.tableData);
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.requests()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            console.log(`当前页: ${val}`);
            this.requests()
        },
    },
};
</script>

<style scoped>

</style>